import Vue from 'vue'
import Component from 'vue-class-component'
import './settingStyle.css'
import {SettingStore} from './store'
import {ProductCopyStore} from './modules/store'
import Platform from '@/supports/platform'
import register from '@/store/register'

register('settingStore', SettingStore)
register('productCopyStore', ProductCopyStore)

@Component
export default class SettingClass extends Vue {
  items = []
  name =''
  url = ''
  faceIcon = ''
  userString = ''

  created () {

  }

  activated () {
    // this.items = []

    this.userString = sessionStorage.getItem('user')
    let self = this
    if (!this.userString || this.userString.length <= 0) {
      Platform.getValueFromKey('userInfo') //
      eventBus.$on('userInfo', function(val) {
        self.userString = val

        let user = JSON.parse(self.userString)
        self.$store.commit('updateUser', user)
        self.$store.commit('setUid', user.uid)
        self.name = user.shopName ? user.shopName : ''

        self.faceIcon = user.shopHeadPic ? user.shopHeadPic : ''

        let currentUid = user.uid

        self.url = 'https://app.fashionfinger.com/buyerapp/topics/' + currentUid + '?from=shop&name=' + self.name
      })
    } else {
      let user = JSON.parse(this.userString)
      this.name = user.shopName ? user.shopName : ''
      this.faceIcon = user.shopHeadPic ? user.shopHeadPic : ''
      const uid = sessionStorage.getItem('uid')
      this.url = 'https://app.fashionfinger.com/buyerapp/topics/' + uid + '?from=shop&name=' + this.name
    }
  }

  handleLoginOut() {
    this.$store.commit('logout')
  }

  handlerCreateCell() {
    const cell = this.items.map((data, index) => {
      return <div><mt-cell title={data.name} to={data.url} is-link></mt-cell></div>
    })
    return cell
  }
  render () {
    return (
      <div class='content' style='margin-top:10px'>
        <mt-header class='header' fixed title="设置"></mt-header>
         <div class="headViewStyle">
        <dl onClick={() => { this.$router.push({name: 'userInfoEdit'}) }}>
          <dt>
            <img src= {this.faceIcon} />
          </dt>
          <dd class="ellipsis">
            {this.name}
          </dd>
          <span>
            <icon name="modifyIcon" scale="3" />
          </span>
        </dl>
        </div>
        <div class = "footViewStyle">
          <div><mt-cell title='店铺专题' to='topic' is-link></mt-cell></div>
          <div><mt-cell title='店铺商品' to='storeProducts' is-link></mt-cell></div>
          <div><mt-cell title='店铺预览' to={this.url} is-link></mt-cell></div>
          <div><mt-cell title='我的订单' to='userOrders' is-link></mt-cell></div>
          <div><mt-cell title='我的求买' to='userWantBuy' is-link></mt-cell></div>
          <div><mt-cell title='修改密码' to='modifyPassword/modify' is-link></mt-cell></div>
          <div><mt-cell title='联系客服' to='linkUs' is-link></mt-cell></div>
        </div>

        <mt-button onClick={this.handleLoginOut} style='margin:30px 10%;width:80%' type="danger" size='large'>退出</mt-button>

      </div>
    )
  }
}
